<!--vue模板-->
<template>
  <!--下拉菜单-->
  <el-dropdown size="small" @command="cmd">
    <el-button type="primary">
      {{ account }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="modifypwd">修改密码</el-dropdown-item>
        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

  <!--修改密码-->
  <modify-pwd v-model:visible="isshowpwd"></modify-pwd>
</template>

<!--vue 组件选项定义-->
<script>
import ModifyPwd from "@/components/ModifyPwd.vue";
export default {
  data() {
    return {
      isshowpwd: false, //是否显示修改密码框
    };
  },
  components: {
    ModifyPwd,
  },
  computed: {
    account: function () {
      return this.$session.getUser().account;
    },
  },
  //方法
  methods: {
    cmd(c) {
      if (c == "modifypwd") {
        this.isshowpwd = true;
      } else if (c == "logout") {
        this.$confirm("您确定要退出吗?", "提示")
          .then((res) => {
            this.$session.logout();
            this.$router.push("/");
          })
          .catch((err) => {});
      }
    },
  },
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped></style>
